<template>
	<view>
		<!-- 位置栏 -->
		<u-navbar title="确认订单" :autoBack="true"></u-navbar>
		<view class="container">
			<view class="header d-flex font-base" @tap="address">
				<view>
					<image class="place" src="@/static/img/index/address.png" mode="widthFix" style="width: 30rpx;">
					</image>
				</view>
				<view class="flex-column ls2 flex-1" v-if="!addressData.id"
					style="display: flex;align-items: flex-start;justify-content: center;">
					<text>暂无地址！</text>
				</view>
				<view class="flex-column ls2  mt-3 flex-1" v-else>
					<view class="mb-2 ">{{addressData.address}}</view>
					<view class="gray">
						<text class="ls2" style="margin-right: 20upx;">{{addressData.realname}}</text>
						<text>{{addressData.mobile}}</text>
					</view>
				</view>
				<view class="">
					<image class="m-3" src="@/static/img/user/right.png" mode="widthFix"
						style="width: 16rpx; height: 14rpx;margin-top: 70rpx;"></image>
				</view>
			</view>
			<view class="division"></view>
			<!-- 商品列表 -->
			<view class="bg">
				<view class="d-flex" v-for="(item, index) in productList" :key="item.id" @click="checkProduct(item)">
					<view style="margin-left: 20rpx;" class="list d-flex">
						<u--image :showLoading="true" :src="item.cover_ico" width="90px" height="90px"
							radius="6"></u--image>
					</view>
					<view class="list-text d-flex flex-column j-sa font-base" style="height: 186upx;width:440upx">
						<view class="font-base">
							<view class="title">{{item.goodname}}</view>
							<view class="Subheading">{{item.goods_introduct}}</view>
						</view>
						<view class="d-flex ">
							<view class="price " style="color: #FF0000;font-size:12px;letter-spacing: 1px;">
								{{item.price}}</view>
							<view style="color: #999;position: absolute;right: 30upx;">x{{item.num}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 商品价格 -->
			<view class="division"></view>
			<view class="header font-base">
				<view style="line-height: 80upx;display: flex;padding: 0 30upx;justify-content: space-between;">
					<view class="">商品金额</view>
					<view class=""> {{total}}</view>
				</view>
				<!-- <view class="" v-if="paytype == 2">
					<view class=""
						style="line-height: 80upx;display: flex;padding: 0 30upx;justify-content: space-between;">
						<view class="">现金额度（现金币/尊享积分）</view>
						<view class="">¥ {{needMoney}}</view>
					</view>
					<view class=""
						style="line-height: 80upx;display: flex;padding: 0 30upx;justify-content: space-between;">
						<view class="">绿色积分额度</view>
						<view class="">{{needStock}}</view>
					</view>
					<view class="" style="padding: 0 30upx;color:#29ad97;font-size: 28upx;">
						提醒：绿色积分不足会扣除现金部分
					</view>
				</view> -->

				<view style="line-height: 80upx;display: flex;padding: 0 30upx;justify-content: space-between;">
					<view class="">运费</view>
					<!-- <view class="gray ml-2">防碎包装</view> -->
					<view>{{transfee}}</view>
				</view>
				<!-- <view class="fs28 d-flex ls2 ml-3">
						<view class="">包装</view>
						<view class="gray ml-2">防碎包装</view>
						<view style="margin-left: 420rpx;margin-bottom: 20rpx;">免费</view>
					</view> -->
			</view>
			<!-- 备注信息	 -->
			<view class="division"></view>
			<form @submit="formSubmit">
				<!-- <view class="header font-base">
					<view class=""
						style="line-height: 60upx;display: flex;padding: 0 30upx;justify-content: space-between;">
						<view class="">支付方式</view>
					</view>
					<view class=""
						style="line-height: 70upx;display: flex;padding: 0 30upx;justify-content: space-between;">
						<radio-group name="type">
							<label v-if="paytype == 1">
								<radio value="1" checked="" /><text>报单币（报单产品）</text>
							</label>
							<label style="margin-left: 20px;" v-if="paytype == 1">
								<radio value="2" /><text>现金币（报单产品）</text>
							</label>
							<label style="" v-if="paytype == 2">
								<radio value="3" /><text>现金币+绿色积分（非报单产品）</text>
							</label>
							<label style="margin-left: 20px;" v-if="paytype == 2">
								<radio value="4" /><text>尊享积分+绿色积分（非报单产品）</text>
							</label>
						</radio-group>
					</view>
				</view> -->

				<!-- 发票信息 -->
				<!-- <view class="division"></view>
			<view class="header font-base" @tap="invoice">
				<view class="d-flex">
					<view class="m-3">发票</view>
					<view class="flex-1 gray mt-3">不需要发票</view>
					<image src="@/static/img/user/right.png" mode="widthFix"
						style="width: 16rpx; height: 14rpx;margin-top: 40rpx;margin-right: 20rpx;"></image>
				</view>
			</view> -->
				<view style="height: 200rpx;"></view>
				<!-- 底部确认栏 -->
				<view class="bottom">
					<view class="d-flex ls2 font-base">
						<view class="d-flex flex-1" style="margin-top: 30rpx;">
							<view style="margin-left: 30rpx;">共{{totalNum}}件</view>
							<view style="margin-left: 20rpx;">合计: </view>
							<view style="color: #FF0000;"> ¥{{total+transfee}}</view>
						</view>
						<button class="bottom-btn" form-type="submit">提交订单</button>
					</view>
				</view>
			</form>
		</view>

		<u-popup :show="isShow" customStyle="width:90%" round="12" mode="center" @close="close">
			<view class="dialog">

				<input type="password" class="pass_input" placeholder="输入支付密码" v-model="password"
					placeholder-style="color:#bbbbbb;font-size:26rpx;" />
				<view class="payBtn">
					<view style="background-color: #e5e5e5;" @tap="cancle();">取消支付</view>
					<view style="background-color: #ff5402;" v-if="isTijiao" @tap="confirm();">确认支付</view>
					<view style="background-color: #e5e5e5;" v-else>支付中...</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,

				addressData: {},
				productList: [],
				dataObj: {},
				total: 0.00,
				transfee: 0.00,
				totalNum: 1,
				isTijiao: true,
				message: '', //备注
				type: 1,
				paytype: 1,

				password: '',
			};
		},

		onLoad(option) {
			setTimeout(function() {
				uni.startPullDownRefresh()
			}, 1000)
			//商品数据
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			let dataObj = {
				token: uni.getStorageSync('token'),
				tag: option.tag
			}

			this.dataObj = dataObj

			this.getAddress();
			this.getProductList();

			uni.$on('changeAddress', () => {
				this.getAddress();
			})
		},

		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},

		methods: {
			async getAddress() {
				let res = await this.$myRequest({
					url: '/getAddress',
					data: this.dataObj,
					methods: 'post'
				})

				let data = res.data.data;
				if (data) {
					this.addressData = data;
				}
			},

			async getProductList() {
				let dataObj = this.dataObj
				let res = await this.$myRequest({
					url: '/getOrder',
					data: dataObj,
					methods: 'post'
				})

				let data = res.data.data.list;
				if (data) {
					this.productList = data;
				}

				this.transfee = res.data.data.transfee;
				this.total = res.data.data.total;
				this.totalNum = res.data.data.num;
				this.paytype = res.data.data.paytype;
			},

			address() {
				uni.navigateTo({
					url: '../user/address'
				})
			},

			invoice() {
				uni.navigateTo({
					url: '../user/invoice'
				})
			},

			formSubmit: function(e) {
				if (!this.addressData.id) {
					this.$api.msg('请先选择收货地址！');
					return false;
				}
				this.isShow = true;
			},

			async confirm() {
				if (!this.password) {
					this.$api.msg('必须输入支付密码！');
					return false;
				}
				this.isTijiao = false;
				let dataObj = this.dataObj
				dataObj.addressid = this.addressData.id;
				dataObj.message = this.message;
				dataObj.paytype = this.paytype;
				dataObj.password = this.password;

				setTimeout(() => {
					this.isTijiao = true;
				}, 4000)

				let res = await this.$myRequest({
					url: '/createOrder',
					data: dataObj,
					methods: 'post'
				})
				this.$api.msg(res.data.msg)
				setTimeout(() => {
					// let all = parseFloat(this.total) + parseFloat(this.transfee);
					// uni.setStorageSync('tag', this.dataObj.tag)
					// uni.redirectTo({
					// 	url: '/pages/cart/pay?money=' + all
					// })
					uni.redirectTo({
						url: '/pages/user/user-order?status=1'
					})
				}, 1000)
			},

			close() {
				this.isShow = false;
			},

			cancle() {
				this.isShow = false;
				this.password = '';
			},

			// changeType(type) {
			// 	this.moneytype = type
			// }
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.container {
		position: relative;
		/* #ifdef APP-PLUS */
		top: 150rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 100rpx;
		/* #endif */
	}

	.header {
		background-color: white;
		width: 96%;
		margin: 0 auto;
		height: 100%;
		border-radius: 20rpx;
		font-size: 26rpx;

		.place {
			margin: 50rpx 20rpx;
		}
	}

	.bg {
		background-color: white;
		width: 96%;
		height: 100%;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.list {
		margin: 20rpx 0 30rpx 0rpx;
		width: 180rpx;
		height: 180rpx;

		border-radius: 30rpx;

		.list-image {}
	}

	.list-text {
		// font-size: 28rpx;
		margin: 20rpx 0 0 20rpx;
		letter-spacing: 4rpx;
		width: 330rpx;
	}

	.Subheading {
		color: #999;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-bottom: 5rpx;
	}

	.price {
		font-size: 32rpx;
		// flex: 1;
		color: #29ad97;
		// margin-top: -10rpx;
	}

	.title {
		white-space: nowrap; //单词在空格处：不换行
		overflow: hidden; //内容溢出的话：隐藏
		text-overflow: ellipsis; //溢出的文本用省略号代替
	}

	.bottom-btn {
		margin-top: 15rpx;
		margin-right: 20rpx;
		background: linear-gradient(to right, #FF403C, #FF6C00);
		color: #F6F6F6;
		font-size: 26rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 100px;
		display: flex;
		justify-content: center;
	}

	.header-bg {
		color: white;
	}

	.bottom {
		background-color: white;
		height: 100rpx;
		border-top: 1rpx solid #eaeaea;
		position: fixed;
		bottom: 0;
		z-index: 1000rpx;
		width: 750rpx;
	}

	.division {
		height: 20upx;
	}

	.dialog {
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
	}

	.pass_input {
		background: #f6f6f6;
		border-radius: 12rpx;
		padding: 18rpx 26rpx;
		font-size: 26rpx;
	}

	.payBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payBtn view {
		width: 48%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		border-radius: 50rpx;
		padding: 22rpx 0;
		margin-top: 50rpx;
	}
</style>